<template>
  <div class="s-warp">
    <n-modal class="s-model" label-placement="left" label-width="auto" require-mark-placement="right-hanging" :style="{
        width: '500px',
        background: 'linear-gradient( 180deg, #0E2B4A 0%, #081C2B 100%)',
        color: '#fff',
      }" v-model:show="modal" :show-icon="false" preset="dialog">
      <div class="title fs16 title-no-line">{{formParams.id ? '编辑': '新增'}}变量</div>
      <div class="title-line"></div>
      <n-form ref="formRef" :model="formParams" require-mark-placement="left" :rules="rules" label-placement="left"
        label-width="100px">
        <n-row :gutter="[0, 24]">
          <n-col :span="24">
            <div class="s-input">
              <n-form-item label="变量名称" path="var_name">
                <n-input clearable v-model:value="formParams.var_name" placeholder="请输入" />
              </n-form-item>

              <n-form-item label="资产状态" path="status">
                <n-select clearable filterable placeholder="请选择" :options="statusOptions"
                  v-model:value="formParams.status" />
              </n-form-item>

              <n-form-item label="资产类型" path="type_id">
                <n-select clearable filterable placeholder="请选择" :options="typeNameOptions"
                  v-model:value="formParams.type_id" />
              </n-form-item>

              <n-form-item label="使用" path="use">
                <n-select clearable filterable placeholder="请选择" :options="useOptions" v-model:value="formParams.use" />
              </n-form-item>

              <n-form-item label="指定资产" path="ass_id">
                <n-tree-select clearable filterable placeholder="请选择" :options="assNameOptions" value-field="key"
                  v-model:value="formParams.ass_id" />
              </n-form-item>
            </div>
          </n-col>
        </n-row>
      </n-form>
      <template #action>
        <n-space class="btns">
          <div class="btn cancel" @click="cancel">取消</div>
          <div class="btn confirm" @click="confirmForm">确认</div>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, h, watch, onMounted } from 'vue';
  // import { assVarEditFormEdit, assVarEditFormGet } from '@/api/GlobalVarMgt/GlobalVarMgt'; // todo open
  // import { getAssTree , getAssType } from '@/api/common/common'; // todo open
  import { useMessage } from 'naive-ui';
  const message = useMessage();
  const emits = defineEmits(['callback']);
  let modal = ref(false);
  // 策略模板提交数据
  let formParams = ref({
    id: '',
    var_name: '',
    status: '',
    type_id: '',
    use: '',
    ass_id: '',
  });
  // 表单提交验证规则
const rules = {
  var_name: { required: true, trigger: 'blur', message: '请输入' },
  status: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  type_name: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  use: { required: true, trigger: 'change', message: '请选择' },
  ass_name: { required: true, trigger: 'change', message: '请选择' },
};
// 指定资产下拉数据
const assNameOptions = ref([
  // { label: '资产1', key: '资产1' },
  // { label: '资产2', key: '资产2' },
  // { label: '资产3', key: '资产3' }、
  {
    label: '1号楼',
    key: '1',
    children: [
      {
        label: '资产A',
        key: '11',
      },
    ],
  },
  {
    label: '2号楼',
    key: '2',
    children: [
      {
        label: '资产B',
        key: '22',
      },
    ],
  },
]);
// 使用下拉数据  使用 1-最近7天 2-最近30天
const useOptions = [
  { label: '最近7天', value: 1 },
  { label: '最近30天', value: 2 },
];
// 资产状态下拉数据 资产状态 0-已废弃 1-出库  2-在库 3-上架 4-维修
const statusOptions = [
  { label: '已废弃', value: 0 },
  { label: '出库', value: 1 },
  { label: '在库', value: 2 },
  { label: '上架', value: 3 },
  { label: '维修', value: 4 },
];
// 资产类型下拉数据
const typeNameOptions = [
  { label: '机柜类1', value: '机柜类2' },
  { label: '机柜类2', value: '机柜类2' },
];
  // 提交表单ref
  const formRef = ref(null);
  // 初始化数据
  async function init(params) {
    formParams.value = {
      id: '',
      var_name: '',
      status: '',
      type_id: '',
      use: '',
      ass_id: '',
    }
    // todo open -- start
    // let res = await assVarEditFormGet({ id: params.id })
    // if (res.code == 200) {
    //   formParams.value = { ...formParams.value, ...res.data };
    // }
    // todo open -- end
    modal.value = true;
  }

  // 弹窗模板关闭
  function closeDialog() {
    modal.value = false;
  }
  // 取消
  function cancel() {
    modal.value = false;
  }
  // 数据提交
  function confirmForm() {
    formRef.value?.validate(async (errors) => {
      if (!errors) {
        let res = await assVarEditFormEdit(formParams.value);
        if (res.code == 200) {
          modal.value = false;
          message.success(res.msg || '成功');
          modal.value = false;
          // 刷新列表
          emits('send', 'refreshTable');
        }
        if (res.code != 200) {
          message.error(res.msg || '失败');
        }
      }
    });
  }
  
  // 下拉数据初始化
  function selectDataInit() {
    // 指定资产下拉数据
    getAssTree().then(res => {
      if (res.code == 200) {
        assNameOptions.value = res.data;
      }
    })

    // 资产类型下拉数据
    getAssType().then(res => {
      if (res.code == 200) {
        typeNameOptions.value = res.data.map(item => ({ value: item.id, label: item.name }));
      }
    })
  }

  // 页面初始化
  onMounted(() => {
    // 下拉数据初始化
    // selectDataInit() // todo open
  })
  // 向外暴露方法
  defineExpose({
    init,
  });
</script>
<style lang="less" scoped>
  .fs16 {
    font-size: 16px;
  }

  .mgt10 {
    margin-top: 10px;
  }

  .input {
    border: 1px solid #25435e;
    border-radius: 4px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: none;
    padding-left: 10px;
  }

  .btn {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding: 0 14px;
    cursor: pointer;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .cancel {
    background: linear-gradient(180deg,
        rgba(#375b8a, 0.5) 0%,
        rgba(103, 107, 109, 0.1) 45%,
        rgba(103, 107, 109, 0.1) 55%,
        rgba(#375b8a, 0.5) 100%);
  }

  .confirm {
    background: linear-gradient(180deg,
        rgba(#2282e3, 0.5) 0%,
        rgba(103, 107, 109, 0.1) 45%,
        rgba(103, 107, 109, 0.1) 55%,
        rgba(#2282e3, 0.5) 100%);
  }

  .form-item {
    width: 100%;
  }

  .table {
    width: 100%;
  }

  .line {
    border-bottom: 1px solid #2e4563;
    margin-bottom: 20px;
  }

  .title {
    border-bottom: 1px solid #2e4563;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  .title-no-line {
    border-bottom: none;
  }

  .flr {
    float: right;
  }

  .fll {
    float: left;
  }

  .cf:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
  }

  .cf {
    zoom: 1;
  }

  .text-blue {
    color: #2282e3;
    cursor: pointer;
    text-decoration: underline;
  }

  .title-line {
    position: absolute;
    top: 36px;
    left: -28px;
    width: calc(100% + 56px);
    height: 1px;
    background: #25435e;
  }
</style>

<style>
  .s-input {
    width: 100%;
  }

  .s-input .n-input {
    background: none;
    width: 100%;
  }

  .s-input .n-form-item-label__text {
    color: #fff !important;
  }

  .s-input .n-input__input-el {
    color: #fff !important;
  }

  .s-table .n-input {
    background: none;
    color: #fff;
  }

  .s-table .n-input__input-el {
    color: #fff !important;
  }

  .s-input .n-input__state-border {
    border: none !important;
  }

  .s-table .n-select {
    background: none !important;
  }

  .s-table .n-base-selection-label {
    background: none !important;
  }

  .s-table .n-base-selection-input__content {
    color: #fff;
  }

  .s-warp .n-input_focus {
    background: red;
  }

  .s-warp .n-input--disabled {
    background: #333 !important;
  }

  .s-input .n-base-selection-label {
    background: none !important;
  }

  .s-input .n-base-selection-label__render-label {
    color: #fff !important;
  }

  .s-input .n-input__border {
    border: 1px solid #25435e !important;
  }

  .s-input .n-base-selection__border {
    border: 1px solid #25435e !important;
  }

  .s-table .n-input__border {
    border: 1px solid #25435e !important;
    /* border: none !important; */
  }

  .s-table .n-base-selection__border {
    border: 1px solid #25435e !important;
    /* border: none !important; */
  }

  .s-input .n-input--focus {
    background: none !important;
  }

  .s-table .n-input--focus {
    background: none !important;
  }

  .r-boder .n-base-selection__border {
    border: none !important;
  }

  .r-boder .n-input__border {
    border: none !important;
  }

  .r-table .n-data-table .n-data-table-th {
    background: none !important;
  }

  .r-table .n-data-table .n-data-table-td {
    background: none !important;
  }

  .r-table .n-data-table.n-data-table--bottom-bordered .n-data-table-td.n-data-table-td--last-row {
    border-bottom: none !important;
  }

  .r-table .n-data-table-table {
    background: none !important;
  }

  .r-table .n-data-table-thead {
    background: none !important;
  }

  .r-table .n-data-table-tr:hover {
    background: none !important;
  }

  .r-boder .n-base-icon {
    display: none !important;
  }

  .r-boder .n-input__state-border {
    display: none !important;
  }

  .r-boder .n-base-selection__state-border {
    display: none !important;
  }

  .r-boder .n-base-selection-input__content {
    color: #006fff !important;
  }

  .n-dialog .n-base-select-menu {
    border: 1px solid #25435e !important;
    background: #0b1d2e !important;
  }

  .n-base-select-option__content {
    color: #d7e7f6 !important;
  }

  .n-base-select-option.n-base-select-option--pending::before {
    background: rgba(161, 159, 159, 0.1) !important;
  }

  .s-model .n-data-table-td {
    position: relative;
  }

  .r-boxed {
    position: absolute;
    top: 8px;
    left: 0;
    display: block;
    width: 400px;
    height: 36px;
    border: 1px solid #25435e;
    border-radius: 4px;
  }

  .s-model .n-base-suffix__arrow {
    width: 0;
    height: 0;
    border-top: 4px solid #869fb7;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  .s-model .n-base-suffix__arrow svg {
    display: none;
  }

  .s-input .n-button--medium-type {
    display: none !important;
  }

  .s-upload {
    margin-top: 10%;
    text-align: center;

    margin-left: 5%;
  }

  .s-upload .n-upload-trigger {
    border: 1px solid #25435e;
    padding: 40px 20px;
    color: #869fb7;
  }

  .s-model {
    padding-top: 0 !important;
  }

  .s-model .n-dialog__close {
    top: -10px !important;
  }
</style>